<template>
	<view>
		<uni-section type="line" title="提现申请列表" class="body-list" :sub-title="userType == '1' ? `账户余额：${balance}` : ''" sub-title-color="#ff5500">
			<template v-slot:right>
				<view class="a" v-if="userType == '1'" @click="toWithdraw">提现</view>
			</template>
			<uni-list :border="true" v-if="withdrawList.length > 0">
				<uni-list-item
					thumbSize="lg"
					direction="column"
					v-for="(item, index) in withdrawList"
					:key="index"
				>
					<template v-slot:header>
						<view class="list-item-header">
							<view class="order-no">提现申请</view>
							<view class="pay-state" :style="{color: item.payState == 1 ? '#00aa00' : '#ff5500'}">{{item.payState == 1 ? '已支付' : '未支付'}}</view>
						</view>
					</template>
					<template v-slot:body>
						<view class="list-item-body">
							<view class="margin-top-10">账户：{{item.toUsername}}</view>
							<view class="margin-top-10">电话：{{item.phone}}</view>
							<view class="margin-top-10">提现时间：{{item.createTime}}</view>
							<view class="margin-top-10">提现金额：<text style="color:#ff5500">{{item.pay}}</text></view>
						</view>
					</template>
				</uni-list-item>
				<uni-load-more :status="status" :icon-size="14" :content-text="contentText"></uni-load-more>
			</uni-list>
			<empty-view v-else></empty-view>
		</uni-section>
		<uni-popup ref="alipayModal" type="bottom">
			<view class="modal-body">
				<view class="modal-header">
					<uni-icons type="close" color="#ff5500" size="26" @click="closeModal"></uni-icons>
				</view>
				<view class="modal-form">
					<uni-forms :modelValue="formData" label-position="top" label-width="150">
						<uni-forms-item label="支付宝姓名" name="realname">
							<uni-easyinput v-model="formData.realname" disabled></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="支付宝账号" name="aliUserName">
							<uni-easyinput v-model="formData.aliUserName" disabled></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="提现金额" name="amount">
							<uni-easyinput v-model="formData.amount" placeholder="提现金额" type="digit"></uni-easyinput>
						</uni-forms-item>
					</uni-forms>
					<button class="button" type="primary" size="mini" @click="submit">提交</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import EmptyView from "@/components/EmptyView"
	
	export default {
		components: {
			EmptyView
		},
		data() {
			return {
				balance: 0,
				formData: {},
				withdrawList: [],
				userType: "",
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},
				pageNo: 1,
				pageSize: 10
			}
		},
		 
		onShow(options) {
			let uid = uni.getStorageSync('uid');
			if(!uid) {
				uni.reLaunch({
					url:'/pages/user/login'
				})
			}
			
			this.userType = uni.getStorageSync('userType');
			
			this.initData()
		},
		
		onReachBottom() {
			if(this.status === 'more') {
				this.status = 'loading';
				this.getWithdrawList();
			}
		},
		
		methods: {
			initData() {
				this.getWithdrawList()
				this.getUserAccount()
			},
			
			getWithdrawList() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/getWithdrawList',
					data: {
						userId: uni.getStorageSync('uid'),
						pageNo: this.pageNo,
						pageSize: this.pageSize
					},
					success: res => {
						if(res.data.success) {
							let result = res.data.result
							let dataList = result.records
							let pn = this.pageNo;
							let datas = [];
							let status;
									
							if (pn == 1) {
								datas = dataList;
							} else {
								datas = this.withdrawList.concat(dataList);
							}
								
							if (result.total > datas.length) {
								pn += 1;
								status = "more"
							} else {
								status = "no-more"
							} 
							
							this.setData({
								status,
								pageNo: pn,
								withdrawList: datas,
							});
							
							uni.hideLoading()
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			getUserAccount() {
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/queryUserAccount',
					data: {
						userId: uni.getStorageSync('uid')
					},
					success: res => {
						if(res.data.success) {
							this.balance = res.data.result
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			showModal() {
				this.$refs.alipayModal.open()
			},
			
			closeModal() {
				this.formData = {}
				this.$refs.alipayModal.close()
			},
			
			toWithdraw() {
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/queryTransferAccountByUserId',
					data: {
						userId: uni.getStorageSync('uid')
					},
					success: res => {
						if(res.data.success) {
							if(res.data.result) {
								this.formData = {
									realname: res.data.result.name,
									aliUserName: res.data.result.identity,
									amount: this.balance
								}
								this.showModal()
							} else {
								uni.showToast({
									icon:'error',
									title: '请先绑定提现账户'
								})
							}
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			submit() {
				uni.showLoading({
					title:'请求中...'
				})
				
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/withdraw',
					method: "POST",
					data: {
						userId: uni.getStorageSync('uid'),
						aliUserName: this.formData.aliUserName,
						realname: this.formData.realname,
						amount: this.formData.amount
					},
					success: res => {
						if(res.data.success) {
							uni.showToast({
								icon:'success',
								title: '设置成功'
							})
							this.closeModal()
							this.initData()
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	.body-list {
		height: 100vh;
	}
	
	.scroll-list {
		height: calc( 100vh - 43px);
	}
	
	.list-item-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.order-no {
			font-size: 30rpx;
			font-weight: bold;
		}
		
		.pay-state {
			font-size: 28rpx;
		}
	}
	
	.list-item-body {
		font-size: 26rpx;
		color: #6d6d6d;
		margin-top: 20rpx;
	}
	
	
	.modal-body {
		background: #fff;
		border-radius: 20rpx;
		padding: 10rpx;
		display: flex;
		flex-direction: column;
		
		.modal-header {
			display: flex;
			justify-content: flex-end;
		}
		
		.modal-form {
			padding: 20rpx;
			
			.button {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 14px;
			}
		}
	}
</style>